<template>
  <div id="cesiumContainer" ref="cesiumContainer"></div>
</template>

<script setup>
import * as Cesium from 'cesium';
import './Widgets/widgets.css';

// 设置cesium 静态资源路径
window.CESIUM_BASE_URL = '/';

// cesium token
Cesium.Ion.defaultAccesssToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDkwYWVhOS0wNzI5LTQ3OTEtOWFiMC1kY2M3MTFiM2I2NWQiLCJpZCI6MTkyNTU1LCJpYXQiOjE3MDY1MTM0MTh9.YAPVHr1d7PBuWayCXM9deCxKg3AbtsXUJiVpubVS3NY';

// 设置默认视角 [笛卡尔坐标系 转换为 世界坐标系]
// api https://cesium.com/learn/cesiumjs/ref-doc/Rectangle.html
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  89.5,
  20.4,
  110.4,
  61.2
);
import { onMounted } from 'vue';
onMounted(() => {
  var viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox: false,
  });
});
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}

/* 隐藏底部logo */
.cesium-widget-credits {
  display: none !important;
}
</style>
